<template>
  <div v-bind="$attrs" :class="props.element.className || 'loc-point-mark'" class="absolute" @click="generalEvent">
    <template v-if="imgArr.length > 0">
      <!-- <px-popover
        placement="top"
        :disabled="imgArr.length === 0"
        popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px;"
      >
        <template #reference>
          <px-carousel height="44px" indicator-position="none" :autoplay="false" arrow="never">
            <px-carousel-item v-for="(iconName, index) in imgArr" :key="index" style="height: 44px">
              <img class="camera" :src="imgMap[iconName]" height="42px" width="32px" />
            </px-carousel-item>
          </px-carousel>
          <div v-for="(iconName, index) in imgArr" :key="index" style="height: 44px;">
            <img class="camera" :src="imgMap[iconName]" height="42px" width="32px" />
          </div>
        </template>
        <template #default>
          <div class="popover-rich-conent" style="display: flex; flex-direction: column; gap: 16px">
            <div
              v-for="(iconName, index) in imgArr"
              :key="index"
              class="popover-rich-conent-item"
              style="height: 44px"
              @click="clickRouter(iconName)"
            >
              <img :src="imgMap[iconName]" height="42px" width="32px" />
              <div>{{ imgLabel[iconName] }}</div>
            </div>
            <div class="popover-rich-conent-item" style="height: 44px" @click.stop.prevent="generalEvent">
              <div>{{ processName }}</div>
            </div>
          </div>
        </template>
      </px-popover> -->
      <px-carousel height="44px" indicator-position="none" :autoplay="false" arrow="never">
        <px-carousel-item v-for="(iconName, index) in imgArr" :key="index" style="height: 44px">
          <img class="camera" :src="imgMap[iconName]" height="42px" width="32px" />
        </px-carousel-item>
      </px-carousel>
    </template>
    <template v-else-if="!props.propValue.longDisplay && !(isVisualEditer && props.propValue.isEditerlongDisplay)">
      <px-tooltip v-if="processName" placement="top" effect="dark">
        <template #content>
          <div class="flex items-center">
            <span>{{ processName }}</span>
          </div>
        </template>
        <img v-if="!props.propValue.isCircle" class="pmd-img" src="@/assets/visual/config/drillLocal.png" />
        <Ripple v-else />
      </px-tooltip>
      <template v-else>
        <img v-if="!props.propValue.isCircle" class="pmd-img" src="@/assets/visual/config/drillLocal.png" />
        <Ripple v-else />
      </template>
    </template>
    <template v-else-if="props.propValue.longDisplay || (isVisualEditer && props.propValue.isEditerlongDisplay)">
      <img v-if="!props.propValue.isCircle" class="pmd-img" src="@/assets/visual/config/drillLocal.png" />
      <Ripple v-else />
      <div class="drill-tooltip absolute flex items-center justify-center">
        <span class="drill-tooltip-inner inline-flex flex-nowrap items-center justify-center">
          <span class="tooltipsvg">
            <tooltipsvg class="shrink-0" />
          </span>
          <span>{{ processName }}</span>
        </span>
      </div>
    </template>
  </div>
  <TableDialog v-model:is-show="tableShow" v-model:group-code="groupCode" />
</template>
<script setup lang="ts">
import tooltipsvg from "@/assets/visual/config/tooltipsvg.svg?component";
import { computed, inject, onBeforeMount, onMounted, reactive, ref, toRaw, toRefs, watch } from "vue";
import { eventBus } from "@/views/all/visual/template/utils/eventBus";
import { getAssetsFile } from "@visual/utils";
import Ripple from "./ripple.vue";
import TableDialog from "./tableDialog.vue";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

const isVisualEditer = inject("isVisualEditer", false);
const eqpStatusStat = inject("eqpStatusStat", ref([]));
const flattenTreeData = inject("curTreeData", ref({}));
const tableShow = ref(false);
const groupCode = ref("");

const props = withDefaults(
  defineProps<{
    propValue?: {
      title?: string;
      groupName?: string;
      typeId?: null | number;
      tip?: string;
      routerKey?: string;
      routerPath?: string;
      longDisplay?: boolean;
      isCircle?: boolean;
      isEditerlongDisplay?: boolean;
      isPositionRight?: boolean;
    };

    remoteData?: { [key: string]: any };
    element?: { [key: string]: any };
  }>(),
  {
    propValue: () => ({
      isEditerlongDisplay: true,
      isPositionRight: true,
      longDisplay: true
    })
  }
);
const emits = defineEmits(["generalEvent"]);
const imglist = ["posalert", "posestop", "posfix", "posinspection", "posmaintian", "posoffline", "poswarn"];
const imgLabel = {
  posalert: "报警", //alarmStatus == 'ON'
  posestop: "停机", //eqpRunStatus == 5
  posfix: "维修", //maintenanceStatus == 3||4
  posinspection: "巡检", //inspectTaskStatus == 2||4
  posmaintian: "保养", //pmsStatus ==  暂无
  posoffline: "离线", //eqpRunStatus == 4
  poswarn: "异常" //eqpRunStatus == 2||3
};
const imgAble = ref({});
const imgMap = {};
const imgArr = ref([]);
const currentTypeName = [];
imglist.forEach(item => {
  imgMap[item] = getAssetsFile(item);
  imgAble.value[item] = true;
});
const generalEvent = () => {
  if (isVisualEditer) return;
  if (props.propValue.groupName && props.propValue.typeId == 689) {
    tableShow.value = true;
    groupCode.value = props.propValue.groupName;
    return;
  }
  if (props.propValue.routerKey) emits("generalEvent", { type: "compRouter", compEmitData: props.propValue.routerKey });
  else if (props.propValue.routerPath) {
    router.push({
      path: props.propValue.routerPath
    });
  }
};
onBeforeMount(() => {
  eventBus.on("posFilterEvent", param => {
    const { rawName, active } = param;
    imgAble.value[rawName] = active;
    imgArr.value = [];
    currentTypeName.forEach(item => {
      if (imgAble.value[item]) {
        imgArr.value.push(item);
      }
    });
  });
});
watch(
  eqpStatusStat,
  () => {
    if (eqpStatusStat.value) {
      if (eqpStatusStat.value.length > 0) {
        const findStatus = eqpStatusStat.value.find(item => item.eqpId === props.propValue.routerKey);
        if (findStatus) {
          const { alarmStatus, eqpRunStatus, maintenanceStatus, inspectTaskStatus, pmsStatus } = findStatus;
          if (alarmStatus == "ON") {
            currentTypeName.push("posalert");
          }
          if (eqpRunStatus == 5) {
            currentTypeName.push("posestop");
          }
          if (maintenanceStatus == 3 || maintenanceStatus == 4) {
            currentTypeName.push("posfix");
          }
          if (inspectTaskStatus == 2 || inspectTaskStatus == 4) {
            currentTypeName.push("posinspection");
          }
          if (eqpRunStatus == 4) {
            currentTypeName.push("posoffline");
          }
          if (eqpRunStatus == 2 || eqpRunStatus == 3) {
            currentTypeName.push("poswarn");
          }
          if (pmsStatus === "ONGONING") {
            currentTypeName.push("posmaintian");
          }
          currentTypeName.forEach(item => {
            if (imgAble.value[item]) {
              imgArr.value.push(item);
            }
          });
        }
      }
    }
  },
  {
    immediate: true
  }
);
const clickRouter = iconName => {
  if (iconName) {
    let jumpePath = null;
    switch (iconName) {
      case "posalert":
        jumpePath = "/all/alert/business"; //报警列表
        break;
      case "posestop":
        jumpePath = "/all/equip/runManage/record";
        break;
      case "posoffline":
        jumpePath = "/all/equip/runManage/record";
        break;
      case "poswarn":
        jumpePath = "/all/equip/runManage/record";
        break;
      case "posfix":
        jumpePath = "/all/equip/maintain/task";
        break;
      case "posinspection":
        jumpePath = "/all/equip/inspect/task"; //
        break;
      case "posmaintian":
        jumpePath = "/all/equip/epm/task/list"; //保养任务列表
        break;
    }
    if (jumpePath) {
      router.push({
        path: jumpePath
      });
    }

    return;
  }
};

const processName = computed(() => {
  if (flattenTreeData.value && props.propValue.routerKey) {
    const curTreeData = flattenTreeData.value[props.propValue.routerKey];
    if (curTreeData) {
      const { type, code } = curTreeData;
      if (type === "EQP") {
        return props.propValue.groupName || code;
      }
    }
  }
  return props.propValue.groupName || props.propValue.tip;
});
</script>
<style lang="scss" scoped>
.loc-point-mark {
  transform-origin: 0 0;
}

.pmd-img {
  width: 100%;
  height: 100%;
  cursor: pointer;
  outline: none;
}

.drill-tooltip {
  top: -32px;
  right: 0;
  left: 50%;
  display: inline-flex;
  flex-wrap: nowrap;
  height: 28px;
  margin: auto;
  font-weight: 400;
  line-height: 16px;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  transform: translate(-50%);

  & > span {
    padding: 5px;
    line-height: 18px;
    white-space: nowrap;
    background-color: #000;
    border-radius: 4px;
    box-shadow: 0 2px 16px 0 rgb(0 0 0 / 32%);
  }

  // .tooltipsvg {
  //   display: inline-flex;
  //   align-items: center;
  //   justify-content: center;
  //   // height: 28px;
  //   // border-radius: 4px 0 0 4px;
  // }
}

.pmd-img:hover + .drill-tooltip .drill-tooltip-inner {
  background-color: #3b82f6 !important;
}

.popover-rich-conent {
  width: 100%;
  height: auto;

  &-item {
    display: flex;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;
    border-radius: 8px;
  }

  &-item:hover {
    background-color: #3b82f6;
  }
}
</style>
